<template>
	<view>
				<u-navbar :border-bottom="false" title="客户信息" back-icon-color="#ffffff" :background="{background:'#2149c3'}" title-color="#ffffff"></u-navbar>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">客户姓名<text class="required">*</text></view>
				<input maxlength="10" v-model="name" placeholder="请填写客户姓名" name="input" :disabled="true"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码<text class="required">*</text></view>
				<input type="number" maxlength="150" v-model="telephone" placeholder="客户手机号(支持多个以英文分号;分隔)" name="input" :disabled="true"></input>
				<!-- <view class="cu-capsule radius">
					<view class='cu-tag bg-blue '>
						+86
					</view>
					<view class="cu-tag line-blue">
						中国大陆
					</view>
				</view> -->
			</view>
			<view class="cu-form-group">
				<view class="title">公司名称</view>
				<input maxlength="20" v-model="company" placeholder="请填写公司名称" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">面积</view>
				<input maxlength="20" v-model="area" placeholder="请填写面积" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">装修类型<text class="required">*</text></view>
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker">
						{{index>-1?picker[index]:'选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">状态<text class="required">*</text></view>
				<picker @change="PickerGJChange" :value="indexgj" :range="pickergj">
					<view class="picker">
						{{indexgj>-1?pickergj[indexgj]:'选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<textarea maxlength="100" v-model="address" placeholder="请填写详细地址(省市区)"></textarea>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">补充情况</view>
				<textarea maxlength="100" v-model="remark" placeholder="请填写补充情况"></textarea>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue margin-tb-sm lg" @click="editCustomer()">保存</button>
			</view>
		</form>		
	</view>
</template>

<script>
	var _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	export default {
			computed: {
				...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
			},
			data() {
				return {
					index: -1,
					indexgj:-1,
					picker: ['毛坯', '遗留装修'],
					pickergj: ['可跟进', '不可跟进','签约','无状态'],
					name: '',
					telephone: '',
					company: '',
					area: '',
					address: '',
					remark: '',
					customerId: '',
					cateCurrentIndex: '',
				};
			},
			onLoad(e){
				_self = this;
				if(e.customerId!=null && e.customerId!=''){
					this.customerId = e.customerId;
				}
				if(e.cateCurrentIndex!=null && e.cateCurrentIndex!=''){
					this.cateCurrentIndex = e.cateCurrentIndex;
				}
				this.findCustomer();
			},
			methods: {
				...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),
				PickerChange(e) {
					this.index = e.detail.value
					console.log(this.index,'index')
				},
				PickerGJChange(e){
					this.indexgj = e.detail.value
					console.log(this.indexgj,'indexgj')
				},
				findCustomer : function(){
				    uni.request({
				    	url: this.serverUrl + 'app/getCustomer',
				    	header: {
				    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				    	},
				    	method: 'POST',
				    	data: {
				    		id: this.customerId,
							shareType: this.cateCurrentIndex,
							memberId: this.userInfo.id
				    	},
				    	success: (r) => {
							// console.log(r);
				    		if (r.data.code==0) {
								this.name=r.data.data.name;
								this.telephone=r.data.data.telephone;
								this.company=r.data.data.company;
								this.area=r.data.data.area;
								this.address=r.data.data.address;
								this.remark=r.data.data.remark;
								this.index=r.data.data.type;
								this.indexgj = r.data.data.identification;
								if(this.indexgj == null){
									this.indexgj = -1
								}
							}
						}
					})
				},
				editCustomer : function(){
					if(this.name.length<1){
						uni.showToast({ title: "客户姓名不能为空", icon: "none" });
						return;
					}
					
					// if(this.telephone.length<1){
					// 	uni.showToast({ title: "手机号不能为空", icon: "none" });
					// 	return;
					// }
					
					// if(this.company.length<1){
					// 	uni.showToast({ title: "公司名称不能为空", icon: "none" });
					// 	return;
					// }
					
					// var reg = /^1[0-9]{10,10}$/;
					// var telephones = this.telephone.split(";");
					// for(var t in telephones){
					// 	console.log(telephones[t]);
					// 	if (!reg.test(telephones[t])) {
					// 		uni.showToast({ title: "手机号格式不正确", icon: "none" });
					// 		return;
					// 	}
					// }
					
					if(this.index==-1){
						uni.showToast({ title: "装修类型不能为空", icon: "none" });
						return;
					}
				    uni.request({
				    	url: this.serverUrl + 'app/editCustomer',
				    	header: {
				    		"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				    	},
				    	method: 'POST',
				    	data: {
							id: this.customerId,
				    		name: this.name,
							telephone: this.telephone,
							company: this.company,
							area: this.area,
							address: this.address,
							remark: this.remark,
							type: this.index,
							identification:this.indexgj,
							shareType: this.cateCurrentIndex,
							memberId: this.userInfo.id
				    	},
				    	success: (r) => {
							//console.log(r);
				    		if (r.data.code==1) {
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
							}else{
								uni.showModal({
									content:r.data.msg
								})
							}
						}
					})
				}
				
			}
		}
</script>

<style>
	.required{
		color: red;
	}
	.padding{
		text-align: center;
	}
	.cu-form-group .title{
		width: 170rpx;
	}
</style>
